<template xmlns:max-height="http://www.w3.org/1999/xhtml">
    <div style="background-color: #242E66">
        <div style="display:flex">
            <!--左侧-->
            <div style="flex:2">
                <div style="height: 650px;background: #242E66">
                    <dv-border-box-11 title="设备详情">
                        <div class="demo-image__placeholder" height="29%" width="150px">
                            <div class="block" >
                                <span class="demonstration"></span>
                                <el-image :src="src" style="width:150px;height:150px;margin-top:60px;margin-left: 120px">
                                    <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                    </div>
                                </el-image>
                            </div>
                        </div>
                        <div  style="height:64%;overflow-y:auto">
                            <el-descriptions :column="1" border style="width:400px;max-height:30px;margin-left: 15px;margin-bottom: 80px">
                                <el-descriptions-item label-class-name="my-content-singular" content-class-name="my-content-singular" label="设备号" >868913053298043</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-label-plural"  label="在线状态">在线</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-content-singular" content-class-name="my-content-singular" label="设备别名">烟感</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-label-plural" label="站点地址">朔城区振华东街51朔州经济开发区管理委员会</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-content-singular" content-class-name="my-content-singular" label="详细地址">四楼管道井</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-label-plural" label="型号">JTY-GM-FL251-HD</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-content-singular" content-class-name="my-content-singular" label="操作">
                                    <el-button :plain="true" @click="open"  size="mini">成功</el-button>
                                    <el-button :plain="true" @click="open"  size="mini">警告</el-button>
                                    <el-button :plain="true" @click="open"  size="mini">消息</el-button>
                                    <el-button :plain="true" @click="open"  size="mini">错误</el-button>
                                </el-descriptions-item>
                                <el-descriptions-item label-class-name="my-label-plural" content-class-name="my-label-plural" label="卡信息">460081113008686</el-descriptions-item>
                                <el-descriptions-item label-class-name="my-content-singular" content-class-name="my-content-singular" label="注册时间">2022-07-22 17:06:20</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </dv-border-box-11>
                </div>
<!--左下-->
                <div style="height: 300px;background:#242E66">
                    <dv-border-box-11 title="定位信息"></dv-border-box-11>
                </div>
            </div>
            <!--右侧-->
            <div style="flex:5;margin-top: 10px;margin-left: 10px">
<!--                右上-->
                <div style="height:250px;background:#182450;">
                    <dv-border-box-11 title="参数信息">
                        <div style="height: 4vh;width: 100%;"></div>
                        <div style="margin-top: 40px;height: 150px;display: flex;margin-left: 15px;margin-right: 15px">
                            <div style="flex: 1;background-color:#3A478F;text-align : center;border:  5px solid #242E66">
                                <div style="height:60px">
                                    <div style="flex:1;position: absolute;left:30px">
                                    <el-image
                                            style="width: 50px; height: 50px"
                                            :src="url">
                                        <div slot="placeholder" class="image-slot">
                                        加载中<span class="dot">...</span>
                                        </div>
                                    </el-image>
                                </div>
                                    <div style="flex:3;position: absolute;left:100px">
                                    <div style="color: white;font-size: 18px;font-weight: 700">信号强度</div>
                                    <div style="color: white;font-size: 14px;font-weight: 700">四楼管道井</div>
                                </div>
                                </div>
                                <div style="height:40px">
                                    <span style="position: absolute;left:30px;color: white;font-size: 14px;font-weight:700">当前值</span>
                                    <span style="position: absolute;left:100px;color:#00FFFF;font-size: 25px;font-weight:700">30</span>
                                </div>
                                <div style="height:20px">
                                    <div style="height:20px;position: absolute;left:30px;color: white;font-size: 14px;font-weight:700">参考阈值：</div>
                                </div>
                                <div style="height:20px">
                                    <div style="position: absolute;left:30px;color: white;font-size: 14px;font-weight:700">上报时间;2024-01-02 22:10:18</div>
                                </div>
                            </div>
                            <div style="flex: 1;background-color:#3A478F;text-align : center;border:  5px solid #242E66">
                                <div style="height:60px">
                                    <div style="flex:1;position: absolute;left:300px">
                                        <el-image
                                                style="width: 50px; height: 50px"
                                                :src="url">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                        </el-image>
                                    </div>
                                    <div style="flex:3;position: absolute;left:370px">
                                        <div style="color: white;font-size: 18px;font-weight: 700">电池电压</div>
                                        <div style="color: white;font-size: 14px;font-weight: 700">四楼管道井</div>
                                    </div>
                                </div>
                                <div style="height:40px">
                                    <span style="position: absolute;left:300px;color: white;font-size: 14px;font-weight:700">当前值</span>
                                    <span style="position: absolute;left:370px;color:#00FFFF;font-size: 25px;font-weight:700">3000mV</span>
                                </div>
                                <div style="height:20px">
                                    <div style="height:20px;position: absolute;left:300px;color: white;font-size: 14px;font-weight:700">参考阈值：</div>
                                </div>
                                <div style="height:20px">
                                    <div style="position: absolute;left:300px;color: white;font-size: 14px;font-weight:700">上报时间;2024-01-02 22:10:18</div>
                                </div>
                            </div>
                            <div style="flex: 1;background-color:#3A478F;text-align : center;border:  5px solid #242E66">
                                <div style="height:60px">
                                    <div style="flex:1;position: absolute;left:560px">
                                        <el-image
                                                style="width: 50px; height: 50px"
                                                :src="url">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                        </el-image>
                                    </div>
                                    <div style="flex:3;position: absolute;left:630px">
                                        <div style="color: white;font-size: 18px;font-weight: 700">电压状态</div>
                                        <div style="color: white;font-size: 14px;font-weight: 700">四楼管道井</div>
                                    </div>
                                </div>
                                <div style="height:40px">
                                    <span style="position: absolute;left:560px;color: white;font-size: 14px;font-weight:700">当前值</span>
                                    <span style="position: absolute;left:630px;color:#00FFFF;font-size: 25px;font-weight:700">正常</span>
                                </div>
                                <div style="height:20px">
                                    <div style="height:20px;position: absolute;left:560px;color: white;font-size: 14px;font-weight:700">参考阈值：</div>
                                </div>
                                <div style="height:20px">
                                    <div style="position: absolute;left:560px;color: white;font-size: 14px;font-weight:700">上报时间;2024-01-02 22:10:18</div>
                                </div>
                            </div>
                            <div style="flex: 1;background-color:#3A478F;text-align : center;border:  5px solid #242E66">
                                <div style="height:60px">
                                    <div style="flex:1;position: absolute;left:820px">
                                        <el-image
                                                style="width: 50px; height: 50px"
                                                :src="url">
                                            <div slot="placeholder" class="image-slot">
                                                加载中<span class="dot">...</span>
                                            </div>
                                        </el-image>
                                    </div>
                                    <div style="flex:3;position: absolute;left:890px">
                                        <div style="color: white;font-size: 18px;font-weight: 700">防拆状态</div>
                                        <div style="color: white;font-size: 14px;font-weight: 700">四楼管道井</div>
                                    </div>
                                </div>
                                <div style="height:40px">
                                    <span style="position: absolute;left:820px;color: white;font-size: 14px;font-weight:700">当前值</span>
                                    <span style="position: absolute;left:890px;color:#00FFFF;font-size: 25px;font-weight:700">闭合</span>
                                </div>
                                <div style="height:20px">
                                    <div style="height:20px;position: absolute;left:820px;color: white;font-size: 14px;font-weight:700">参考阈值：</div>
                                </div>
                                <div style="height:20px">
                                    <div style="position: absolute;left:820px;color: white;font-size: 14px;font-weight:700">上报时间;2024-01-02 22:10:18</div>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-11>
            </div>
<!--右中-->
                <div style="margin-top: 10px;height: 400px;background:#242E66">
                    <dv-border-box-12>
                        <div style="height: 50px;text-align: end">
                        <el-button type="primary" icon="el-icon-download"
                                   circle size="small"
                                   @click="dialogVisibledownload = true"
                                   style="position: absolute;left:900px;margin-top: 16px"></el-button>
                        <el-dialog title="导出" :visible.sync="dialogVisibledownload"
                                   width="30%">
                            <el-divider></el-divider>
                            <el-form :model="download" label-width="80px">
                                <el-form-item label="文件名">
                                    <el-input v-model="download.filename" placeholder="请输入 文件名"></el-input>
                                </el-form-item>
                                <el-form-item label="数据">
                                    <el-select v-model="download.date" filterable clearable placeholder="请选择 数据">
                                        <el-option
                                                v-for="item in dateoptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字段">
                                    <el-select v-model="download.field" filterable  multiple clearable placeholder="请选择 字段">
                                        <el-option
                                                v-for="item in fieldoptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="参数">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox label="表头" disabled></el-checkbox>
                                        <el-checkbox label="数据源"></el-checkbox>
                                        <el-checkbox label="复杂表头" disabled></el-checkbox>
                                        <el-checkbox label="合计统计" disabled></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogVisibledownload = false">确 定</el-button>
                            <el-button type="primary" @click="dialogVisibledownload = false">取 消</el-button>
                        </span>
                        </el-dialog>
                        <el-button  type="primary" icon="el-icon-refresh" circle size="small"
                                    style="position: absolute;left:950px;margin-top: 16px"></el-button>
                    </div>
                        <el-table
                            :data="tableData"
                            border
                            style="width: 98%;background-color:#3F51B5;margin-left: 10px;margin-right: 5px">
                        <el-table-column
                                prop="date"
                                label="上报时间"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="数据类型"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="上报内容">
                        </el-table-column>
                    </el-table>
                        <div style="text-align: end;margin-top: 10px">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="100">
                        </el-pagination>
                    </div>
                    </dv-border-box-12>
                </div>
<!--                右下-->
                <div style="display:flex;background-color: #242E66">
                    <div style="flex:1;height:280px;">
                    <dv-border-box-11 title="分层图"></dv-border-box-11>
                </div>
                    <div style="flex:1;height:280px;">
                        <dv-border-box-11 title="视频联动"></dv-border-box-11>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2024-01-02 22:10:17',
                    type: '心跳',
                    content: '电池电压：3000mV；信号强度(强)：30'}],
            dialogVisibledownload: false,
                download: {
                filename: '',
                    date: '',
                    field: ''},
                dateoptions: [{value: '选项1', label: '当前数据(当前页全部的数据)'},
                    {value: '选项2', label: '选中的数据(当前页选中的数据)', disabled: true}],
                    value: '',
                fieldoptions: [{value: '选项1', label: '添加至单位'},
                {value: '选项2', label: '所属单位'},
                {value: '选项3', label: '姓名'},
                {value: '选项4', label: '电话'},
                {value: '选项5', label: '是否关注公众号'},
                {value: '选项6', label: '微信通知'},
                {value: '选项7', label: '短信通知'},
                {value: '选项8', label: '语音通知'}],
                value: '',
                checkList:'',

                src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            };
        },
        methods:{
            open() {
                this.$message('命令已提交');
            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 300px;
        display: block;
    }
    ::v-deep .my-content-singular {
        background: #384176 !important;
        color: white;
        border:0px solid #242E66 !important;
    }
    ::v-deep .my-label-plural {
        background: #242E66 !important;
        color: white;
        border:0px solid #242E66 !important;
    }
    ::v-deep.el-dialog {
        position: relative;
        margin: 0 auto 50px;
        background:#242E66!important;
        border-radius: 2px;
        box-sizing: border-box;
        width: 50%;
    }
    .el-dialog__title {
        line-height: 24px;
        font-size: 18px;
        color: #fff;
    }
    ::v-deep.el-dialog{
        background:#242E66 !important;
    }

    ::v-deep.el-dialog__body {
        color: #fff;
        background-color: #242E66!important;
    }
    ::v-deep.el-dialog__header {
        color: #fff;
        background-color: #242E66!important;
    }
    ::v-deep.el-dialog__footer {
        color: #fff;
        background-color: #242E66!important;

    }.el-table__body, .el-table__footer, .el-table__header {
             background-color: #242E66;
     }
</style>